import { useEffect, useState } from "react";
import './dyx_Sou.css'
import { SearchOutline, SetOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom";
import { NavBar, SearchBar } from 'antd-mobile';
import axios from 'axios'
let Sou = (props) => {
    let Navigate = useNavigate()
    let [travel_list,setTravel_list]=useState([])
    useEffect(()=>{
        axios.get('http://127.0.0.1:3000/dyx_index/dyx_travel').then(res=>{
            if(res.data.code==200){
                setTravel_list(res.data.data)
            }
        })
    },[])
    return (
        <>
            <div className="soubox">
                <div className="souheader">
                    <NavBar onBack={() => {
                        Navigate('/Foot/Shou')
                    }}>主题旅游</NavBar>
                    <input onFocus={()=>{
                        Navigate('/Dyx_Find')
                    }} type="text" style={{width:"36rem",height:"4rem",borderRadius:"4rem",paddingLeft:"2rem",marginTop:"1.5rem"}} placeholder="搜索目的地/景点" />
                </div>
                <div className="soumain">
                    {
                        travel_list.map((item)=>{
                            return(
                                <div key={item._id} className="soutravel">
                                    <div className="souimg">
                                        <img src={item.img[1]} alt="" />
                                    </div>
                                    <div className="souspan">
                                            <p style={{fontSize:"2rem",fontWeight:"bolder"}}>{item.name}</p>
                                            <p style={{width:"3rem",height:"2rem",backgroundColor:"#f2f2f2",textAlign:"center",lineHeight:"2rem",borderRadius:"0.4rem"}}>{item.level}</p>
                                            <p style={{fontSize:"1.6rem",color:"gray"}}>{item.score}分</p>
                                            <button style={{borderColor:"skyblue",color:"blue",borderRadius:"0.6rem",padding:"0.5rem 0.5rem"}}>可订明白</button>
                                            <button style={{borderColor:"skyblue",color:"blue",borderRadius:"0.6rem",marginLeft:"1rem",padding:"0.5rem 0.5rem"}}>随时退</button>
                                    </div>
                                    <div className="souprice">
                                        {
                                            item.price >0?<p style={{color:"red",fontSize:"2rem",fontWeight:"bolder",width:"7rem",marginTop:"11rem"}}>￥{item.price}起</p>:
                                            <p style={{fontSize:"1.7rem",width:"7rem",marginTop:"11rem",marginRight:"1rem"}}>免费预约</p>
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

        </>
    )

}

export default Sou;